<template>
  <div class="box flex-al container" v-if="peopleData" style="margin-top: 60px">
    <!-- <swiper
      :options="swiperOption"
      :slides-per-view="3"
      :space-between="50"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      ...
    </swiper> -->

    <div class="container flex-row al-start j-sb">
      <div class="left">
        <oneTitle title="个人简介"></oneTitle>
        <div v-html="peopleData.synopsis" style="margin-bottom: 60px"></div>
        <div class="w100">
          <build-el-title-text
            :title="peopleData.modelName1"
            title_en="REPORT"
          ></build-el-title-text>
        </div>
        <div v-html="peopleData.modelContent1" v-margin-top="'15px'" />
        <div class="w100" v-margin-top="'60px'">
          <build-el-title-text
            :title="peopleData.modelName2"
            title_en="COMPANY"
          ></build-el-title-text>
        </div>
        <div v-html="peopleData.modelContent2" v-margin-top="'15px'" />
        <div class="w100" v-margin-top="'60px'">
          <build-el-title-text
            :title="peopleData.modelName3"
            title_en="ACHIEVEMENT"
          ></build-el-title-text>
        </div>
        <div
          style="margin-bottom: 60px"
          v-html="peopleData.modelContent3"
          v-margin-top="'15px'"
        />
        <oneTitle title="部分作品展示"></oneTitle>
        <div v-html="swObj.description"></div>
        <img
          :src="IMGURL + swObj.imgUrl"
          style="width: 100%; max-height: 600px; margin-top: 30px"
          alt=""
          @click="handHerf"
        />
        <div class="sw_box">
          <swiper
            ref="mySwiper"
            :auto-update="true"
            :options="swiperOption"
            :slides-per-view="3"
            :space-between="50"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            style="width: 700px"
          >
            <swiper-slide
              v-for="(item, index) in peopleData.artistWorks"
              :key="index"
            >
              <img
                :style="{
                  border: swIndex == index ? '3px solid #bf1425' : '',
                  width: '110px',
                  height: '77px',
                }"
                @click="handSwImg(index, item)"
                :src="IMGURL + item.imgUrl"
                alt=""
              />
            </swiper-slide>
          </swiper>
          <img
            src="@/assets/imgs/arr-left.png"
            class="swiper-button-prev"
            slot="button-prev"
            alt=""
            @click="handLeft"
          />
          <img
            src="@/assets/imgs/arr-right.png"
            alt=""
            class="swiper-button-next"
            slot="button-next"
            @click="handRight"
          />
        </div>
      </div>
      <div class="right">
        <build-el-head
          :rid="peopleData.recordId"
          :url="peopleData.artistPortrait"
          :com="peopleData.companyName"
          :position="peopleData.artistPosition"
          :name="peopleData.artistName"
        ></build-el-head>
        <p class="w100 dep" v-html="peopleData.description"></p>
        <el-button
          class="w100"
          v-margin-top="'30px'"
          type="primary"
          @click.stop="handVote"
          >投票</el-button
        >
      </div>
    </div>
    <div v-margin-top="'60px'"></div>
  </div>
</template>
<script>
import buildElBread from "@/components/build-el-bread";
import buildElTitleText from "@/components/build-el-title-text";
import buildElPerviewImgs from "@/components/build-el-perview-imgs";
import buildElHead from "../components/build-el-head";
let IMGURL = process.env.VUE_APP_BASR_IMG_URL;
export default {
  components: {
    buildElBread,
    buildElTitleText,
    buildElPerviewImgs,
    buildElHead,
  },
  data() {
    return {
      peopleData: null,
      swIndex: 0,
      swObj: {},
      IMGURL: IMGURL,
      id: null,
      swiperOption: {
        slidesPerView: 6,
        spaceBetween: 8,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        scrollbar: ".swiper-scrollbar", //滚动条
        mousewheelControl: true,
        observeParents: true,
      },
    };
  },
  async created() {
    this.$route.meta.active = "/vote";
    this.id = this.$route.query.id;
    this.init(this.id);
  },
  methods: {
    handSwImg(index, item) {
      console.log(item);
      this.swIndex = index;
      this.swObj = item;
    },
    handHerf() {
      if (this.swObj.imgSrc) {
        window.open(this.swObj.imgSrc);
      }
    },
    handLeft() {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    handRight() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
    onSwiper(swiper) {},
    onSlideChange() {},
    async handVote() {
      let res = await this.api.votePc({
        customizeId: 1,
        artistId: this.peopleData.id,
      });
      this.$message({
        message: res.content,
        type: "success",
      });
    },
    async init(id) {
      let people = await this.api.selectOneArtistPeople(id);
      this.peopleData = people;

      if (people.artistWorks) {
        people.artistWorks = JSON.parse(people.artistWorks);
        if (people.artistWorks.length != 0) {
          this.swObj = people.artistWorks[0];
        }
      }
      console.log(this.peopleData.artistWorks);
    },
  },
};
</script>
<style lang="less" scoped>
.left {
  width: 880px;
  background: #ffffff;
  border-radius: 6px;
  border-radius: 6px;
  padding: 60px 40px;
}
.sw_box {
  position: relative;
  margin-top: 30px;
  .swiper-button-prev {
    width: 50px;
    height: 50px;
    left: 0;
  }
  .swiper-button-next {
    width: 50px;
    height: 50px;
    right: 0;
  }
}

.right {
  width: 300px;
  background: #ffffff;
  padding: 32px 20px;
  border-radius: 6px;
  border-radius: 6px;
  padding-bottom: 42px;
  .dep {
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    text-align: left;
    margin-top: 20px;
  }
}
</style>
